<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

defineProps({
  title: {
    required: true,
    type: String
  }
})

const router = useRouter()
const goBack = () => {
  router.go(-1)
}
</script>

<template>
  <div class="detailContainer">
    <div class="header">
      <div class="left">
        <el-button class="button" @click="goBack" :icon="ArrowLeftBold" style="width: 80px;">返回</el-button>
        <el-divider class="divider" direction="vertical" />
        <span class="title">{{ title }}</span>
      </div>
      <div class="right">
        <slot name="headerRight"></slot>
      </div>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
    <div class="footer">
      <div class="left">
        <slot name="footerLeft"></slot>
      </div>
      <div class="right">
        <slot name="footerRight"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.detailContainer {
  /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认是拉伸 */
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px;

    .left {
      display: flex;
      .title {
        margin-left: 0;
        margin-right: 10px;
      }
      .divider {
        margin: 0 10px;
        height: 30px;
        line-height: 30px;
      }
      .title {
        margin-left: 0;
        margin-right: 10px;
        height: 30px;
        line-height: 30px;
      }
    }

    .right {
      display: flex;
    }
    .right > :deep * {
      width: 100px;
      margin-right: 0;
      margin-left: 10px;
    }
  }

  .body {
    margin: 0 10px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 0;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px;

    .left {
      display: flex;
    }
    .left > :deep * {
      width: 100px;
      margin-left: 0;
      margin-right: 10px;
    }

    .right {
      display: flex;
    }
    .right > :deep * {
      width: 100px;
      margin-right: 0;
      margin-left: 10px;
    }
  }
}
</style>
